<template>
  <view style="height: 100%">
    <!-- 遮罩层 -->
    <view
      class="mask pay-actionsheet-mask"
      :class="[show ? 'pay-mask-show' : '']"
    ></view>
    <!-- 组件内容 -->
    <view
      class="bg-light fixed-bottom pay-actionsheet"
      :class="[show ? 'pay-actionsheet-show' : '']"
    >
      <view
        class="h2 text-muted"
        style="position: absolute; top: 0; right: 20rpx"
        @tap="handleClose()"
        >×</view
      >
      <view class="font-weight-bold text-center pt-5">
        <text class="font-lg">￥</text><text class="h2">{{ amount }}</text>
      </view>

      <view class="text-center pb-5">
        <text class="font">待支付</text>
      </view>
      <view class="text-center py-5">
        <text class="font-lg font-weight-bold">请选择支付方式</text>
      </view>
      <!-- 支付方式 -->
      <radio-group class="pt-3" @change="select">
        <label
          v-for="(item, index) in way"
          :key="index"
          style="position: relative"
          class="mx-4 mt-2 bg-white p-3 flex align-center rounded-lg"
        >
          <image
            :src="Domain_ICON + item.icon"
            class="rounded"
            style="width: 35rpx; height: 35rpx"
            mode=""
          ></image>
          <text class="font-md ml-2 font-weight-bold">{{ item.value }}</text>
          <radio
            :value="item.value"
            style="transform: scale(0.7); position: absolute; right: 20rpx"
            :checked="item.select"
          />
        </label>
      </radio-group>
      <view class="px-4 py-2 fixed-bottom">
        <view
          class="bg-info rounded text-center py-3 text-white font-weight-bold font"
          @click="submit()"
          hover-class="bg-hover-info"
          :hover-stay-time="150"
          >{{ payway }}￥{{ amount }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import times from "@/mixins/time.js";
import {
  getArticleCheckStock,
  get_wj,
  setPurchaseOrder,
  PurchaseNative,
} from "@/api/merchant.js";
export default {
  data() {
    return {
      loading: false, //节流
      times: "",
      payway: "微信支付", //支付方式
      Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
    };
  },
  props: {
    show: {
      //显示支付方式
      type: Boolean,
      default: false,
    },
    amount: {
      //总计金额
      type: null,
      default: "",
    },
    Purchase_Order_Paystages_SerialNumber: {
      //总计金额
      type: String,
      default: "",
    },
    way: {
      //支付方式
      type: Array,
      default: function () {
        return [
          {
            icon: "/WXlogo.png",
            value: "微信支付",
            select: true,
          },
        ];
      },
    },
  },
  methods: {
    handleClose() {
      //关闭
      this.$emit("Close");
    },
    async submit() {
		const that = this
      //通过参数获取订单
      console.log(this.Purchase_Order_Paystages_SerialNumber);
      const res = await PurchaseNative({
        Collection_Type: "微信支付移动",
        Purchase_Order_Paystages_SerialNumber:
          this.Purchase_Order_Paystages_SerialNumber, //明细主键
        Open_ID: app.globalData.openid,
      });
      console.log(res);
      //将订单传给微信支付
      if (res.result_msg == "SUCCESS") {
        let appId = res.sdk_appid;
        let timeStamp = res.sdk_timestamp + "";
        let nonceStr = res.sdk_noncestr;
        let packageX = res.sdk_package;
        let signType = res.sdk_signtype;
        let paySign = res.sdk_paysign;
        uni.requestPayment({
          provider: "wxpay",
          appId: appId,
          timeStamp: timeStamp,
          nonceStr: nonceStr,
          package: packageX,
          signType: signType,
          paySign: paySign,
          success: function (res) {
            uni.showToast({
              title: "支付成功！",
              icon: "success",
              success() {
                uni.navigateTo({
                  url: `/pages/paycomplete/paycomplete?price=${that.amount}`,
                });
              },
            });
          },
          fail: function (err) {
            uni.showToast({
              title: "已取消！",
              icon: "error",
            });
          },
          //调起支付后打开懒加载
          complete: () => {
            this.loading = false;
            uni.hideLoading();
          },
        });
      } else {
        that.loading = false;
        uni.hideLoading();
        uni.showToast({
          title: "拉起支付失败，请重试！",
          icon: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.pay-actionsheet {
  width: 100%;
  height: 100%;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
}

.pay-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.pay-actionsheet-mask {
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.pay-mask-show {
  opacity: 1;
  visibility: visible;
}
</style>